<template>
    <div class="city">
        <!-- 顶部导航 -->
        <van-nav-bar title="京东地址" left-text="返回" left-arrow @click-left="$router.back()" />
        <!-- 索引列表 -->
        <van-index-bar>
            <van-index-anchor v-for="item of cityList" :key="item.letter" :index="item.letter.toUpperCase()">
                {{ item.letter.toUpperCase() }}
                <van-cell v-for="city of item.data" :key="city.cityId" :title="city.name" />
            </van-index-anchor>
        </van-index-bar>

    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import axios from 'axios'

const cityList = ref([])
onMounted(() => {
    axios({
        url: '../../public/city.json'
    }).then(res => {
        cityList.value = res.data
    })
})


</script>

<style scoped lang="scss">
.van-index-anchor {
    width: 100%;
}
</style>